import './index.scss'

const data = [
  {
    url: `//randomuser.me/api/portraits/men/${Math.floor(Math.random() * 100)}.jpg`,
    desc: 'x1',
    icon: 'gift',
    id: 1,
  },
  {
    url: `//randomuser.me/api/portraits/men/${Math.floor(Math.random() * 100)}.jpg`,
    desc: 'Misteri',
    icon: 'box-red',
    id: 2,
  },
  {
    url: `//randomuser.me/api/portraits/men/${Math.floor(Math.random() * 100)}.jpg`,
    desc: 'x1',
    icon: 'gift',
    id: 3,
  },
  {
    url: `//randomuser.me/api/portraits/men/${Math.floor(Math.random() * 100)}.jpg`,
    desc: 'x1',
    icon: 'gift',
    id: 4,
  },
  {
    url: `//randomuser.me/api/portraits/men/${Math.floor(Math.random() * 100)}.jpg`,
    desc: 'x1',
    icon: 'gift',
    id: 5,
  },
  {
    url: `//randomuser.me/api/portraits/men/${Math.floor(Math.random() * 100)}.jpg`,
    desc: 'x1',
    icon: 'gift',
    id: 6,
  },
  {
    url: `//randomuser.me/api/portraits/men/${Math.floor(Math.random() * 100)}.jpg`,
    desc: 'Kejutan',
    icon: 'box-yellow',
    id: 7,
  },
]

function GiftResult() {
  const jump = () => {
    console.log('jump')
  }
  const gifts = data.slice(0, 4)
  return (
    <div className="GiftResult">
      <h4 className="title">Berhasil masuk, selamat</h4>
      <ul style={{width: gifts.length === 4 ? '66%' : '100%'}}>
        {gifts.map((d, i) => (
          <li>
            <div className="wrap">
              <div className="img">
                <img src={d.url} alt=""/>
              </div>
              <p className="desc">{d.desc}</p>
            </div>
          </li>
        ))}
      </ul>
      <button className="jump-btn" onClick={jump}>获取更多</button>
    </div>
  )
}

export default GiftResult
